<template>
  <div class="financialLicence">
    <div class="header">
      <van-nav-bar title="贷款办理" fixed left-text="返回" right-text left-arrow @click-left="onClickLeft"/>
    </div>
    <section class="head">
      <div class="head_div">
        <img src="../../assets/images/greenFinance/27.png"/>
      </div>
    </section>
    <header>
      <img src="../../assets/images/greenFinance/6.png"/>
      <p>您的信息已受到保护，请放心填写</p>
    </header>
    <section class="section">
      <div class="registration_from">
        <p>真实姓名</p>
          <input type="text" placeholder="请填写姓名" class="input1" v-model.trim='formData.aname'>
        </div>
      <div class="registration_from">
        <p>手机号码</p>
        <input type="number " placeholder="请填写手机号码" class="input1" v-model.trim='formData.aphone' oninput="if(value.length>11) value=value.slice(0,11)">
      </div>
      <div class="registration_from2">
        <p>身份证件</p>
        <input type="text" placeholder="请填写身份证号码" class="input1" v-model.trim='formData.capital'>
      </div>
      <div class="registration_from">
        <p>地址</p>
        <div class="xiala1">
          <input type="text" placeholder="请选择省市区" :value="addressInif" @click="onSelAddr()" readonly="readonly">
          <img src="../../assets/images/greenFinance/12.png">
        </div>
        <van-popup v-model="showAdder" position="bottom" :overlay="false">
          <van-area :area-list="areaList" @confirm="onAddrConfirm" @cancel="onAddrCancel" />
        </van-popup>
      </div>
      <div class="registration_from">
        <p>详细地址</p>
        <input type="text" placeholder="请填写详细地址，例如*街道*栋*单元*号" class="input1" v-model.trim='formData.detailedAddress'>
      </div>
      <div class="registration">
        <p>申请额度（万）</p>
        <div class="bar">
          <div style="overflow: hidden;">
            <div class="xiala">
              <input type="text" placeholder="请选择" :value="radioList"  readonly="readonly" @click="onNum()">
              <p class="p2">万</p>
              <img src="../../assets/images/greenFinance/12.png">
            </div>
            <!--<p class="bar_p">至</p>-->
            <!--<div class="xiala">-->
              <!--<input type="text" placeholder="请选择" :value="radioNum"  readonly="readonly" @click="onNumer()">-->
              <!--<p>万</p>-->
              <!--<img src="../../assets/images/greenFinance/12.png">-->
            <!--</div>-->
          </div>

          <div class="danxuan1" v-show="showNum">
            <van-radio-group v-model="radioList">
              <van-radio name="30" checked-color="#07c160" @click="upNum()">30万</van-radio>
              <van-radio name="40" checked-color="#07c160" @click="upNum()">40万</van-radio>
              <van-radio name="50" checked-color="#07c160" @click="upNum()">50万</van-radio>
              <van-radio name="100" checked-color="#07c160" @click="upNum()">100万</van-radio>
              <van-radio name="300" checked-color="#07c160" @click="upNum()">300万</van-radio>
              <van-radio name="500" checked-color="#07c160" @click="upNum()">500万</van-radio>
              <van-radio name="1000" checked-color="#07c160" @click="upNum()">1000万</van-radio>
            </van-radio-group>
          </div>

        <!--<div class="danxuan" v-show="showNumer">-->
          <!--<van-radio-group v-model="radioNum">-->
            <!--<van-radio name="30" checked-color="#07c160" @click="upNumer()">30万</van-radio>-->
            <!--<van-radio name="40" checked-color="#07c160" @click="upNumer()">40万</van-radio>-->
            <!--<van-radio name="50" checked-color="#07c160" @click="upNumer()">50万</van-radio>-->
            <!--<van-radio name="100" checked-color="#07c160" @click="upNumer()">100万</van-radio>-->
            <!--<van-radio name="300" checked-color="#07c160" @click="upNumer()">300万</van-radio>-->
            <!--<van-radio name="500" checked-color="#07c160" @click="upNumer()">500万</van-radio>-->
            <!--<van-radio name="1000" checked-color="#07c160" @click="upNumer()">1000万</van-radio>-->
          <!--</van-radio-group>-->
        <!--</div>-->
      </div>
      </div>
    </section>
    <button class="Merchant_button" @click="submit()">立即申请</button>
    <div class="registration_from3">
      <img src="../../assets/images/greenFinance/28.png" class="foot_img"/>
    </div>
    <footer>
      <div class="foot">
        <div class="footer_left">
          <a :href="'tel:' + 13518071508">
          <img src="../../assets/images/greenFinance/29.png">
          </a>
        </div>
        <div class="footer_right" @click="toApplicationRecord()">
          <img src="../../assets/images/greenFinance/30.png">
        </div>
      </div>

    </footer>
    <!--<div style="position: fixed;bottom: 1rem;right: 0.1rem;width: 0.6rem;height: 0.6rem;" @click="toLink()">-->
      <!--<img src="../../assets/images/greenFinance/31.png" style="width: 100%;">-->
    <!--</div>-->




  </div>
</template>

<script>

  import  AdderssInif from '../../../static/area'
  export default {
    name: "loanProcessing",
    data() {
      return {
        radioList:'',
        radioNum:'',
        areaList:AdderssInif,
        addressInif:'',
        showAdder:false,
        showNumer:false,
        showNum:false,
        formData: {
          aname: '',
          aphone: '',
          capital:'',
          detailedAddress:'',
        },
      }
    },
    components: {

    },
    mounted() {


    },
    methods: {
      //返回
      onClickLeft() {
        let u = navigator.userAgent;
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        let params={

        };
        if (isAndroid) {
          console.warn('finish');
        } else if (isiOS) {
          window.webkit.messageHandlers.onClickLeftYuansheng.postMessage(params);
        }

      },
      onNum(){
        this.showNum=true
      },
      upNum(){
        this.showNum=false
      },
      onNumer(){
        this.showNumer=true
      },
      upNumer(){
        this.showNumer=false
      },
      //显示地址
      onSelAddr(){
        this.showAdder=true
      },
      //显示地址确定
      onAddrConfirm(val){
        this.showAdder=false;
        this.addressInif=val[0].name+''+val[1].name+''+val[2].name
      },
      //显示地址取消
      onAddrCancel(){
        this.showAdder=false
      },
      //跳转申请记录
      toApplicationRecord(){
        this.$router.push({path: '/loanRecord', query:{}})
      },
      // 提交所有数据----请求后台
      async submit() {
        var token = this.$cookies.get("token")||localStorage.getItem('token');
        let u = navigator.userAgent;
        let isAndroid = u.indexOf("Android") > -1 || u.indexOf("Adr") > -1; //android终端
        let isiOS = !!u.match(/\(i[^;]+;( U;)? CPU.+Mac OS X/); //ios终端
        if(!token){
          if (isAndroid) {
            console.warn("ecologylogin");
          } else if (isiOS) {
            window.webkit.messageHandlers.goBackLogin.postMessage(null);
          }
        }else {
           if(this.formData.detailedAddress==''){
             this.$toast('请填写详细地址');
           }else {
             let params = {
               name: this.formData.aname,
               identity_card: this.formData.capital,
               phone: this.formData.aphone,
               address: this.addressInif + this.formData.detailedAddress,
               credit_limit: this.radioList,
             };
             //发送请求到后台
             const res = await this.$axios.post(this.$api.loanProcessingList, params);
             if (res.success) {
               this.$toast(res.msg);
             } else {
               this.$toast(res.msg);
             }
           }
        }

      },
      async toLink(){
        const res = await this.$axios.post(this.$api.businessCirclesData);
        if (res.data) {
          this.$router.push({path: '/loanProcess'})
        } else {
          this.$toast(res.msg);
        }
      }
    }
  }
</script>

<style scoped>
  .financialLicence{width: 100%;background-color: #fff;}
  .head{width: 100%;padding-top: 0.46rem;}
  .head_div{width: 94%;margin: 0.2rem auto 0.1rem; }
  .head_div img{width: 100%;}
  header{width: 100%;overflow: hidden;height: 0.43rem;line-height: 0.43rem;border-bottom: 2px solid #f7f7f7;}
  header img{width: 0.13rem;float: left;margin:0.12rem 0.1rem 0.12rem 0.15rem;}
  header p{float: left;color: #ff3d3d;}
  .section{padding-top: 0.15rem;}
  .registration_from{overflow: hidden;width: 100%;line-height: 0.45rem;}
  .registration_from p{float: left;width: 24%;text-align: left;padding-left: 0.2rem;}
  .input1{float: right;height: 0.4rem;width: 66%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;margin-right: 0.21rem;margin-bottom: 0.1rem;}
  textarea{width: 90%;margin: 0 5%;background-color: #f2f2f2;border: 0;border-radius: 0.05rem;padding:0.1rem;line-height: 0.22rem;}
  .registration_from1 p{width: 100%;padding: 0.1rem 0.23rem 0.15rem 0.15rem;}
  .Merchant_button {width: 90%;color: #fff;font-size: 0.16rem;margin: 0.2rem 5% 0.1rem;background-color: #ff4a2f;border: 0;border-radius: 0.05rem;line-height: 0.44rem;}
  .van-radio{padding: 0.05rem 0 0.03rem 0.2rem;}
  .van-checkbox{line-height: 0.4rem;padding-left: 0.9rem;}
  .p1{text-align: center;}
  .xiala1{width: 66%;border-radius: 0.05rem;overflow: hidden;background-color: #f2f2f2;margin-right: 0.21rem;float: right;margin-bottom: 0.1rem;}
  .xiala1 input{float: left;height: 0.4rem;width: 90%;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;}
  .xiala1 img{float: left;width: 0.12rem;margin-top: 0.15rem;}
  .registration_from2{overflow: hidden;width: 100%;line-height: 0.45rem;}
  .registration_from2 p{float: left;padding: 0 0 0 0.2rem;}
  .danxuan{background-color: #f2f2f2;width: 41.8%;border-radius: 0.05rem;margin: 0 0.06rem 0.1rem 0;float: right;}
  .danxuan1{background-color: #f2f2f2;width: 100%;border-radius: 0.05rem;margin: 0 0 0.1rem 0;float: left;}
  .registration_from3{overflow: hidden;width: 100%;}
  .registration_from3 p{float: left;padding: 0 0.23rem 0 0.15rem;line-height: 0.45rem;}
  footer{width: 100%;position: fixed;bottom: 0;background-color: #fff;padding-bottom: 0.1rem;}
  .foot{overflow: hidden;width: 98%;margin: 0 auto;}
  .footer_left{width: 50%;position: relative;right: -0.09rem;float: left}
  .footer_left img{width: 100%;height: 0.54rem}
  .footer_right{width: 50%;position: relative;left:-0.08rem;float: left}
  .footer_right img{width: 100%;height:0.54rem}
  .registration_from3{width: 94%;margin: 0 auto 0;padding-bottom: 1rem;}
  .foot_img{width: 100%;}

  .registration{width: 100%;}

  .xiala{width: 100%;border-radius: 0.05rem;overflow: hidden;background-color: #f2f2f2;float: left;}
  .xiala input{float: left;height: 0.4rem;width: 59%;border: 0;border-radius: 0.05rem;padding-left: 0.1rem;}
  .xiala p{float: left;padding: 0 0.2rem 0 0!important;line-height: 0.4rem!important;}
  .xiala img{float: left;width: 0.12rem;margin-top: 0.15rem;}
  .bar_p{float: left;padding: 0 0.2rem!important;}
  .footer_left a{font-size: 0.4rem;}
  @media screen and (min-width:320px) and (max-width:374px) and (orientation:portrait) {
    .registration p{padding: 0 0 0 0.2rem;line-height: 0.45rem;float: left;width: 37%;text-align: left;}
    .bar{width: 55%;overflow: hidden;float: right;margin-right: 0.21rem;}
    .p2{width: 30%!important;}
  }
  @media screen and (min-width:375px) and (max-width:414px) and (orientation:portrait) {
    .registration p{padding: 0 0 0 0.2rem;line-height: 0.45rem;float: left;width: 32%;text-align: left;}
    .bar{width: 62%;overflow: hidden;float: right;margin-right: 0.21rem;}
  }
</style>

